<template>
    <div class="app-container">
        <el-table v-loading="loading" :data="UserTopSongsList">
            <el-table-column width="70" align="center">
                <template #default="scope">
                    <span style="margin-left: 16px">{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="歌曲ID" align="center" prop="trackId" width="150"/>
            <el-table-column label="歌曲名" align="center" prop="trackTitle" />
            <el-table-column label="播放占比" align="center" prop="totalPlayratio" width="150"/>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script setup name="UserTopSongs">
import {getUserTopSongs, listUserTopSongs} from "@/api/UserTopSongs/UserTopSongs";
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const currentUserId = computed(() => userStore.id)

const { proxy } = getCurrentInstance();

const UserTopSongsList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        trackId: null,
        totalPlayratio: null
    },
});

const { queryParams } = toRefs(data);

/** 查询用户Top10歌曲列表 */
function getList() {
    loading.value = true;
    data.queryParams.userId = currentUserId.value;
    console.log("Query Params:", currentUserId.value);
    getUserTopSongs(currentUserId.value).then(response => {
        UserTopSongsList.value = response.data.map(item => ({
            trackTitle: decodeURIComponent(item.trackTitle.replace(/\+/g, ' ').replace("_", "——")),
            trackId: item.trackId,
            totalPlayratio: item.totalPlayratio
        }));
        total.value = response.total;
        loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

getList();
</script>

<style scoped>
.app-container {
    padding: 20px;
}
</style>